<template>
  <main-layout
    title="美少女智能采购系统"
    :addBtn="true"
    @addClick="addEvt"
    @homeClick="homeEvt"
  >
    <div class="chart-list">
      <div class="chart-box" ref="lineChartNode"></div>
    </div>
    <div class="fn-box" v-for="item in fnList" :key="item.name">
      <span class="title">{{ item.name }}</span>
      <div class="box-items">
        <div class="item" v-for="i in item.children" :key="i.name">
          <i @click="toPage(i)" :class="['item-icon', i.icon]"></i>
          <span class="item-text">{{ i.name }}</span>
        </div>
      </div>
    </div>
  </main-layout>
</template>

<script>
import echarts from "echarts";
import LineChart from "./LineChart";
import { getAnalysisApi, getPayableApi } from "../../apis/homeApis";
export default {
  mixins: [LineChart],
  data() {
    return {
      fnList: [
        {
          name: "基础数据",
          children: [
            {
              id: "SYSTEM-01-01",
              icon: "product-list",
              name: "材料管理",
              right: "R",
              path: "",
            },
            {
              id: "SYSTEM-01-02",
              icon: "product-new",
              name: "新建材料",
              right: "C",
              path: "",
            },
            {
              id: "SYSTEM-01-03",
              icon: "supplier-list",
              name: "供应商管理",
              right: "R",
              path: "",
            },
            {
              id: "SYSTEM-01-04",
              icon: "supplier-new",
              name: "新建供应商",
              right: "C",
              path: "",
            },
          ],
        },
        {
          name: "项目管理",
          children: [
            {
              id: "PROJECT-01-01",
              icon: "project-list",
              name: "项目管理",
              right: "C",
              path: "/project/list",
            },
            {
              id: "PROJECT-01-02",
              icon: "project-new",
              name: "新建项目",
              right: "C",
              path: "/project/edit",
            },
          ],
        },
        {
          name: "采购管理",
          children: [
            {
              id: "PURCHASE-01-01",
              icon: "purchase-list",
              name: "采购管理",
              right: "R",
              path: "/purchase/list",
            },
            {
              id: "PURCHASE-01-02",
              icon: "purchase-new",
              name: "新建采购",
              right: "C",
              path: "/purchase/list",
            },
          ],
        },
        {
          name: "收货管理",
          children: [
            {
              id: "RECEIVING-01-01",
              icon: "receive-list",
              name: "收货管理",
              right: "R",
              path: "",
            },
            {
              id: "RECEIVING-01-02",
              icon: "receive-new",
              name: "新建收货",
              right: "C",
              path: "",
            },
          ],
        },
        {
          name: "系统管理",
          children: [
            { id: "", icon: "setting", name: "设置", path: "/setting" },
          ],
        },
      ],
    };
  },

  //获取权限数据
  computed: {
    userRights() {
      return this.$store.getters["common/userRights"];
    },
  },

  mounted() {
    this.lineChart = echarts.init(this.$refs.lineChartNode);
    this.getLineData();
  },

  methods: {
    async getLineData() {
      let result = await getAnalysisApi();
      this.renderLineChart(result.data);

      let w = await getPayableApi();
      // console.log(result,w)
    },
    homeEvt() {},
    addEvt() {},
    //图标点击，页面跳转
    toPage(route) {
      //route参数是否有完整路由，没有表示页面还未开发
      console.log('route',route);
      if (!route.path) {
        this.$toast.fail("功能建设中... 敬请期待");
      }

      if (!route.right) {
        this.$router.push(route.path);
        return;
      }
      //  debugger;
      let myRight = this.userRights.find((it) => it.id == route.id);
      // console.log('myRights',this.myRights)
      // console.log('myRight.role',myRight.role)
      if (!!myRight && myRight.role.includes(route.right)) {
        this.$router.push(route.path);
      } else {
        this.$toast.fail("您没有访问权限，请联系管理员！");
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "./index.less";
</style>